<template>
  <view>
    <template v-if="!state.loading">
      <Add v-if="isEdit" ref="addRef" :data="state.data" :classId="state.class_id" @confirm="loadData" />
      <Detail v-else :data="state.data" :classId="state.class_id" :fromType="state.fromType" @edit="state.edit = true" />
    </template>
    <view v-else class="h-600 flex flex-col justify-center items-center">
      <u-loading size="60" color="#F4AF22" />
    </view>
  </view>
</template>

<script setup>
import { getOnlineCourseStudyNote } from '@/common/http/module/square'
import Add from './add.vue'
import Detail from './detail.vue'

const state = reactive({
  class_id: '',
  fromType: '',
  user_id: '',
  data: '',
  loading: true,
  edit: false
})

const isEdit = computed(() => !state.data || state.edit)

function loadData() {
  state.loading = true
  getOnlineCourseStudyNote(state.class_id, state.user_id).then(res => {
    state.data = res.data
    state.edit = false
    state.loading = false
  }).catch(() => state.loading = false)
}

onLoad(options => {
  state.class_id = options.id
  state.fromType = options.fromType
  state.user_id = options?.user_id
  loadData()
})
</script>

<style lang="scss">


</style>